<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="15">
          <el-form-item label-width="110px" label="上上记账日期" prop="field101">
            <el-input v-model="formData.field101" placeholder="上上记账日期" readonly clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label-width="105px" label="上一记账日期" prop="field102">
            <el-input v-model="formData.field102" placeholder="请输入上一记账日期" readonly clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label-width="110px" label="当前记账日期" prop="field103">
            <el-input v-model="formData.field103" placeholder="请输入当前记账日期" readonly clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label-width="110px" label="当前记账日期" prop="field105">
            <el-date-picker v-model="formData.field105" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" placeholder="请选择当前记账日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        formData: {
          field101: undefined,
          field102: undefined,
          field103: undefined,
          field105: null,
        },
        rules: {
          field101: [],
          field102: [],
          field103: [],
          field105: [{
            required: true,
            message: '请选择当前记账日期',
            trigger: 'change'
          }],
        },
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
        // TODO 提交表单
      })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }

</script>
<style>
</style>
